import React, { useEffect, useState } from 'react';
import '../MonitoringPanel.css';

interface MainControlIndicatorsPanelProps {
  // 可以添加从父组件传入的属性
}

// 生成模拟的主控指标数据
const generateControlIndicatorsData = () => {
  const months = ['1月', '2月', '3月', '4月', '5月', '6月'];
  const indicatorsData = months.map(() => Math.floor(Math.random() * 80) + 20); // 20-100
  
  return {
    months,
    indicatorsData
  };
};

const MainControlIndicatorsPanel: React.FC<MainControlIndicatorsPanelProps> = () => {
  const [data, setData] = useState(generateControlIndicatorsData());
  const [isAnimating, setIsAnimating] = useState(false);

  // 模拟数据更新
  useEffect(() => {
    const interval = setInterval(() => {
      setIsAnimating(true);
      setTimeout(() => {
        setData(generateControlIndicatorsData());
        setIsAnimating(false);
      }, 300);
    }, 22000); // 每22秒更新一次数据

    return () => clearInterval(interval);
  }, []);

  // 计算条形图的高度
  const calculateBarHeight = (value: number) => {
    return (value / 100) * 80; // 占图表高度的80%
  };

  return (
    <div className={`monitoring-panel ${isAnimating ? 'data-update' : ''}`}>
      <div className="panel-header">
        <h3 className="panel-title">机房主控指标</h3>
      </div>
      
      <div className="chart-container">
        <svg width="100%" height="100%" viewBox="0 0 300 180">
          {/* 背景网格 */}
          <g opacity="0.1">
            {[0, 25, 50, 75, 100].map((value) => (
              <line 
                key={`h-${value}`}
                x1="0" y1={value} x2="300" y2={value} 
                stroke="#74b6ff" strokeWidth="1" 
              />
            ))}
            {[0, 20, 40, 60, 80, 100].map((value) => (
              <line 
                key={`v-${value}`}
                x1={(value / 100) * 300} y1="0" x2={(value / 100) * 300} y2="100" 
                stroke="#74b6ff" strokeWidth="1" 
              />
            ))}
          </g>
          
          {/* 数值标签 */}
          <text x="0" y="10" fill="#a0aec0" fontSize="10">100</text>
          <text x="0" y="60" fill="#a0aec0" fontSize="10">50</text>
          <text x="0" y="110" fill="#a0aec0" fontSize="10">0</text>
          
          {/* 条形图 - 背景 */}
          {data.indicatorsData.map((value, index) => {
            const x = 30 + (index * 45);
            
            return (
              <rect 
                key={`bg-bar-${index}`}
                x={x}
                y={isAnimating ? 100 : 20}
                width="30"
                height={isAnimating ? 0 : 80}
                fill="rgba(20, 37, 61, 0.5)"
                rx="4"
                ry="4"
                className={isAnimating ? 'bar-animation' : ''}
                style={isAnimating ? {
                  animation: `barGrow 0.6s ease-out forwards`,
                  animationDelay: `${index * 0.05}s`
                } : {}}
              />
            );
          })}
          
          {/* 条形图 - 前景 */}
          {data.indicatorsData.map((value, index) => {
            const barHeight = calculateBarHeight(value);
            const x = 30 + (index * 45);
            const y = 100 - barHeight;
            
            // 根据数值设置颜色
            const getBarColor = (val: number) => {
              if (val >= 80) return '#ff4444';
              if (val >= 60) return '#ffaa00';
              if (val >= 40) return '#74b6ff';
              return '#44ff44';
            };
            
            return (
              <g key={`bar-${index}`}>
                <rect 
                  x={x}
                y={isAnimating ? 100 : y}
                width="30"
                height={isAnimating ? 0 : barHeight}
                fill={getBarColor(value)}
                rx="4"
                ry="4"
                className={isAnimating ? 'bar-animation' : ''}
                style={isAnimating ? {
                  animation: `barGrow 0.6s ease-out forwards`,
                  animationDelay: `${index * 0.05}s`
                } : {}}
                />
                
                {/* 发光效果 */}
                <rect 
                  x={x}
                y={isAnimating ? 100 : y}
                width="30"
                height={isAnimating ? 0 : barHeight}
                fill={getBarColor(value)}
                rx="4"
                ry="4"
                opacity="0.3"
                className={isAnimating ? 'bar-animation' : ''}
                style={isAnimating ? {
                  animation: `barGrow 0.6s ease-out forwards`,
                  animationDelay: `${index * 0.05}s`
                } : {}}
                />
                
                {/* 数值标签 */}
                <text 
                  x={x + 15}
                  y={y - 10}
                  textAnchor="middle"
                  fill="#ffffff"
                  fontSize="10"
                >
                  {value}
                </text>
              </g>
            );
          })}
          
          {/* 月份标签 */}
          {data.months.map((month, index) => (
            <text 
              key={`month-${index}`}
              x={30 + (index * 45) + 15}
              y="120"
              textAnchor="middle"
              fill="#a0aec0"
              fontSize="10"
            >
              {month}
            </text>
          ))}
        </svg>
      </div>
    </div>
  );
};

export default MainControlIndicatorsPanel;